<template>
    <div class="content-right">
        <section class="app-container">
            <el-row>
                <el-button size="mini" icon="iconfont ali-zuo" @click="back"></el-button>
            </el-row>
            <br>
            <el-row>
                <el-col :span="2">
                    <img :src="user.portrait" v-if="user.portrait">
                    <i class="iconfont ali-avatar" v-else></i>
                </el-col>
                <el-col :span="16">
                    <span style="font-size: 15px; color: #303133;">{{user.user_name}}</span>
                    <br>
                    <em style="font-size: 13px;color: #909399">{{irState.selectDept.dept_name}}</em>
                </el-col>
                <p class="statistics-text">
                    总积分:
                    <span>{{scores}}</span>分
                </p>
            </el-row>
            <section class="content-search">
                <el-form :inline="true">
                    <el-form-item label="时间">
                        <el-date-picker type="daterange" value-format="yyyy-MM-dd" v-model="listQuery.searchDate" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input clearable v-model.trim="listQuery.remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <el-form-item label="积分类型">
                        <el-select clearable v-model="listQuery.integraltype_id" placeholder="请选择" style="width: 160px;">
                            <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" size="small" @click="search">搜索</el-button>
                </el-form>
            </section>
        </section>
        <!-- 表格数据 -->
        <div class="">
            <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
                <el-table-column align="center" prop="id" label="流水号">
                </el-table-column>
                <el-table-column align="center" prop="integraltype_name" label="积分类型">
                </el-table-column>
                <el-table-column align="center" prop="score" label="积分">
                </el-table-column>
                <el-table-column align="center" prop="create_time" label="发生时间">
                </el-table-column>
                <el-table-column align="center" prop="remark" label="备注">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <section>
            <so-pagination :query="listQuery" @initList="initList"/>
        </section>
        <!-- 占位 -->
        <br>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { integraltype_listAll } from '@/api/integraltype'
import { user_findById } from "@/api/user"
import { integralRecord_list } from '@/api/integralRecord'
import { searchTool } from '@/utils'
import SoPagination from '@/components/SoPagination'

export default {
    name: "count_detail",
    components: { SoPagination },
    computed: {
        ...mapGetters(["companyName", "irState"]),
    },
    data() {
        return {
            classList: [],
            user: {},
            loading: false,
            tableList: [],
            listQuery: { start: 0, limit: 10, total: 0, current: 1 },
            scores: 0, //总积分
        };
    },
    methods: {
        back() {
            this.$router.push("/integralCount/list")
            this.$nextTick(_ => {
                this.$store.dispatch("findRecordListById", this.irState.selectDept);
            })
        },
        async initUser() {
            let { data } = await user_findById({ id: this.$route.query.user_id })
            if (data.status == 100) {
                this.user = data.data
            }
        },
        async initClassList() {
            let { data } = await integraltype_listAll({ company_id: localStorage.getItem("companyId") });
            if (data.status == 100) {
                this.classList = data.data.rows.map(item => {
                    return { id: item.id, label: item.integraltype_name }
                });
            }
        },
        async initList() {
            this.loading = true
            const parms = {dept_id: this.irState.selectDept.id, company_id: localStorage.getItem("companyId"), ...this.listQuery};
            let { data } = await integralRecord_list(parms)
            this.loading = false
            if (data.status == 100) {
                this.tableList = data.data.rows
                this.listQuery.total = data.data.results;
                this.scores = data.data.scores;
            }
        },
        async search() {
            let keyWords = { key: 'searchDate', names: ['create_starttime', 'create_endtime']}
            this.listQuery = searchTool(this.listQuery, keyWords);
            this.initList();
        }
    },
    created() {
        this.initClassList();
        this.initUser();
        this.initList();
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-right {
    border: 1px solid #e5e5e5;
    .content-search {
        margin-top: 20px;
    }
    .statistics-text {
        padding-right: 40px;
        span {
            font-size: 24px;
            color: #409eff;
        }
    }
}

img {
    width: 50px;
    border-radius: 25%;
}

.ali-avatar {
    font-size: 50px;
}
</style>
